
function SmallToBig(){
    this.mBox = document.querySelector(".middleBox");
    this.mImg = document.querySelector(".middleBox img");
    this.mSpan = document.querySelector(".middleBox span");
    this.bBox = document.querySelector(".bigBox");
    this.bImg = document.querySelector(".bigBox img");

    this.imgs = document.querySelectorAll(".list img");
    this.index = 0;
    this.imgArr = [{
        large:"./imgs/l0.jpg",
        middle:"./imgs/m0.jpg",
        small:"./imgs/s0.jpg",
    },{
        large:"./imgs/l1.jpg",
        middle:"./imgs/m1.jpg",
        small:"./imgs/s1.jpg",
    },{
        large:"./imgs/l2.jpg",
        middle:"./imgs/m2.jpg",
        small:"./imgs/s2.jpg",
    },{
        large:"./imgs/l0.jpg",
        middle:"./imgs/m0.jpg",
        small:"./imgs/s0.jpg",
    },{
        large:"./imgs/l1.jpg",
        middle:"./imgs/m1.jpg",
        small:"./imgs/s1.jpg",
    },{
        large:"./imgs/l2.jpg",
        middle:"./imgs/m2.jpg",
        small:"./imgs/s2.jpg",
    },{
        large:"./imgs/l0.jpg",
        middle:"./imgs/m0.jpg",
        small:"./imgs/s0.jpg",
    },{
        large:"./imgs/l1.jpg",
        middle:"./imgs/m1.jpg",
        small:"./imgs/s1.jpg",
    },{
        large:"./imgs/l2.jpg",
        middle:"./imgs/m2.jpg",
        small:"./imgs/s2.jpg",
    }]

    this.addEvent();
}
SmallToBig.prototype.addEvent = function(){
    const that = this;
    this.mBox.addEventListener("mouseover", function(){
        that.show()
    })
    this.mBox.addEventListener("mouseout", function(){
        that.hide()
    })
    this.mBox.addEventListener("mousemove", function(){
        that.move()
    })
    // 给list中的每个图片绑定事件
    this.imgs.forEach((val,idx)=>{
        val.onclick = function(){
            // 清除之前的高亮
            that.imgs[that.index].className = "";
            // 给当前点击的添加高亮
            this.className = "active";
            // 根据当前遍历到的元素的索引，读取数据，获取中图和大图，设置给指定img标签的src属性
            that.bImg.src = that.imgArr[idx].large;
            that.mImg.src = that.imgArr[idx].middle;
            // 将本次点的索引，设置为下一次的上一个
            that.index = idx;
        }
    })
}
SmallToBig.prototype.show = function(){
    this.mSpan.style.display = "block";
    this.bBox.style.display = "block";
    this.getSize();
    this.mSpan.style.width = this.bBoxW / this.bImgW * this.mBoxW + "px";
    this.mSpan.style.height = this.bBoxH / this.bImgH * this.mBoxH + "px";
}
SmallToBig.prototype.getSize = function(){
    this.bBoxW = this.bBox.offsetWidth;
    this.bBoxH = this.bBox.offsetHeight;
    this.bImgW = this.bImg.offsetWidth;
    this.bImgH = this.bImg.offsetHeight;
    this.mBoxW = this.mBox.offsetWidth;
    this.mBoxH = this.mBox.offsetHeight;
}
SmallToBig.prototype.hide = function(){
    this.mSpan.style.display = "none";
    this.bBox.style.display = "none";
}
SmallToBig.prototype.move = function(eve){
    const e = eve || window.event;
    let l = e.offsetX - this.mSpan.offsetWidth/2;
    let t = e.offsetY - this.mSpan.offsetHeight/2;
    if(l<0) l=0;
    if(t<0) t=0;
    if(l>this.mBoxW-this.mSpan.offsetWidth){
        l=this.mBoxW-this.mSpan.offsetWidth;
    }
    if(t>this.mBoxH-this.mSpan.offsetHeight){
        t=this.mBoxH-this.mSpan.offsetHeight;
    }
    this.mSpan.style.left = l + "px";
    this.mSpan.style.top = t + "px";
    const x = l / (this.mBoxW-this.mSpan.offsetWidth);
    const y = t / (this.mBoxH-this.mSpan.offsetHeight);
    this.bImg.style.left = - x * (this.bImgW-this.bBoxW) + "px";
    this.bImg.style.top = - y * (this.bImgH-this.bBoxH) + "px";
}
